<template>
    <div>
        <el-form :model="form" :rules="rules" label-position="right" ref="form" label-width="160px">
           <el-form-item label="姓名：" prop="cl_name">
               <el-col :span="8">
                   <el-input v-model="form.cl_name" placeholder="请输入友情链接名称"></el-input>
               </el-col>
           </el-form-item>
           
           <el-form-item label="友情链接图片：" prop="cl_icon">
               <el-col :span="8">
                   <upload-image :preview="form.cl_icon" v-on:cropperImage="cropperImageClick" v-on:uploadImageChange="uploadImageChange"></upload-image>
                   
				   <el-button @click="imgBoxBtn(form)" style="margin-top: 10px;">从图库选择</el-button>
               </el-col>
           </el-form-item>
            <el-form-item label="友情链接地址：" prop="cl_url">
                    <el-col :span="8">
                        <el-input v-model="form.cl_url" placeholder="请输入友情链接地址"></el-input>
                    </el-col>
            </el-form-item>
            
            <el-form-item label="友情链接类型：" prop="cl_type">
               <el-col :span="15">
                   <el-radio v-model="form.cl_type" label="0" >文字</el-radio>
                   <el-radio v-model="form.cl_type" label="1" >图片</el-radio>
               </el-col>
           </el-form-item>
           
           <el-form-item>
               <el-button type="primary" @click="submitForm('form')">提交</el-button>
               <el-button @click="resetForm">重置</el-button>
           </el-form-item>
        </el-form>
    </div>
</template>

<script>
    import { mapState,mapMutations } from 'vuex'
    export default {
        //数据源
        data(){
            return {
               rules : {
                    cl_name : [
                        { required: true, message: '请输入友情链接名称', trigger: 'blur' }
                    ]
                }
            }
        },
        //初始化函数
        mounted() {

            this.initData();

        },
        //计算属性
        computed: {
            ...mapState({ 
                form : state => state.EditLinksModule.form
            })
        },
        //组件方法
        methods: {
            cropperImageClick() {
				var that = this;
				this.$cropperImage({
					//裁切完成后回调函数
					cropperImageResult(file) {
						that.$http.Aliyun_uploadImageHttp(file, rsUrl => {
							that.form.cl_icon = rsUrl;
						})
					},
					//要裁切的图片
					imgUrl: this.form.cl_icon
				});
			},
			uploadImageChange(e){
				var fileObj = e.target.files[0];
				this.$http.Aliyun_uploadImageHttp(fileObj,rsUrl => {
					this.form.cl_icon = rsUrl
				});
			},
            initData(){

                this.$myLoading.startLoading()
                this.$http.getHttp(
                    this.$API.cmsLinkSearch + "/cl_id/" + this.$route.query.cl_id,
                    rs => {
                        this.$store.commit('EditLinksModule/udpateForm',rs.data[0])
                        this.$myLoading.endLoading()
                    }
                )

            },

            submitForm(form){

                this.$refs[form].validate((valid) => {

                    if (valid) {

                        var params = {
                            update_where    : 'cl_id',
                            cl_id   : this.$route.query.cl_id,
                            cl_name : this.form.cl_name,
                            cl_icon : this.form.cl_icon,
                            cl_url  : this.form.cl_url,
                            cl_type : this.form.cl_type,
                            cl_create_time : this.$common.currentTime()
                        }

                        this.$myLoading.startLoading();

                        this.$http.postHttp(this.$API.cmsLinkUpdate, params , rs => {

                            this.$myLoading.endLoading();
                            this.$myPop.SuccessMessage();
                            
                            setTimeout(()=>{
                                history.go(-1)
                            },1000);
                            

                            
                        });

                    }

                })

            },

            resetForm(){

                this.$store.commit('AddLinksModule/clearForm')

            },
            imgBoxBtn(items) {
                var that = this
                //回调函数
                this.$selectImageBox({
                    selectImageValue(item){
                    	console.log('------回调！？？！？！')
                    	console.log(item)
                    	items.cl_icon = item;
                    }
                })
            },

        }
    }
</script>

<style lang="stylus" scoped>
@import '~PUBLIC_CSS';

</style>